/**
 * zhx.multiCTC Main Style Sass
 * Author : Vicco Wang
 * Date : 05/04/2017
 */
.multiSubCtcWrapper{
  @include use-flex;
  @include flex-column;
  width:100%;
  height:100%;
  font-size:12px;

  .ctc-header{
    height:28px;
    background-color : lighten( $base-gray-color, 13% );
    position:relative;
    @include use-flex;

    .ctc-line-name{
      min-width:50px;
      max-width:75px;
      background-color: $base-blue-color;
      padding:0 3px;
      color: #fff;
      font-size:1.2em;font-weight:600;
      @include use-flex;
      @include flex-align-center;

    }

    .ctc-line-info{
      background-color:$dark-blue-color;
      color: #fff;

      ul{
        width:100%;
        height:100%;
        @include use-flex;
        @include flex-align-center;
        overflow: hidden;

        li{
          margin:0 5px;
          span{
            display: inline-block;
            margin-left:2px;

            &:first-child{
              color: lighten( $base-gray-color, 20% );
            }

            &:last-child{
              font-weight:600;
            }

          }
        }
      }
    }

    .ctc-bus-info{

      ul{
        width:100%;
        height:100%;
        @include use-flex;
        @include flex-align-center;
        //overflow: hidden;

        li{
          height:100%;
          min-width:25px;
          max-width:125px;
          padding:0 5px;
          @include use-flex;
          @include flex-align-center;
          color: #fff;
          background-color : lighten( $base-gray-color, 25% );
          border-right:1px solid lighten( $base-gray-color, 15% );

          &.pointerCursor{
            cursor: pointer;
          }

          span{
            display: inline-block;
            margin:0 2px;
            font-weight:600;

            &.info-title{
              color : lighten( $base-color, 10% );
            }

            &:last-child{
              font-weight:600;
            }

          }

          &.up-standby, &.down-standby{
            color: $dark-green-color ;
          }
          &.up-nonServ, &.down-nonServ{
            color: $dark-yellow-color;
          }
          &.off-line{
            color: $base-color;
          }
          &.stopServ{
            color: $base-red-color;
          }

        }
      }

    }

    .ctc-line-ctrl{
      position:absolute;
      height:100%;
      right:15px;

      &.snapRight{
        right:20px;
      }

      ul{
        width:100%;
        height:100%;
        @include use-flex;
        @include flex-align-center;
        overflow: hidden;

        li{
          color: $base-color;
          cursor: pointer;
        }

      }

    }

  }

  .ctc-main{
    flex:1;
    @include use-flex;
    @include flex-align-center;

    .ctc-linearMap-wrapper{
      @include use-flex;
      @include flex-column;
      width:90%;  //直线图线路不能两头顶边,需要冗余

      .ctc-linearMap-up-line,.ctc-linearMap-down-line{
        height:3px;
        width:100%;
        background-color: $base-green-color;
        border-radius:3px;
        margin:20px 0;

        &.line-left{
          margin-left:-7px;
        }

        &.line-right{
          margin-left:8px;
        }

        ul{
          width:100%;
          height:100%;
          position:relative;

          &.ctc-linear-bus{
            li{
              position:absolute;
              width:15px;height:15px;
              border-radius:15px;
              //background-color: $base-red-color;
              background-color: #fff;
              border:3px solid $dark-blue-color;
              z-index:15;
              box-sizing:border-box;
              @include frame-transition(all,.2s);
              cursor: pointer;

              &.busHover{
                transform: scale(1.4);
                z-index:100;
                box-shadow:0 3px 3px rgba(0,0,0,.3);
              }

              &.busActive{
                transform: scale(1.4);
                background-color:$base-blue-color;
                z-index:100;
                box-shadow:0 3px 3px rgba(0,0,0,.3);
              }

              &.busStationing{
                border:none;
                background-color : $base-blue-color;
              }

              //车辆报警
              &.busAlarm{
                transform: scale(1.7);
                border:none;
                animation: busScale 1s ease-in-out infinite;
                box-shadow:0 3px 8px rgba(0,0,0,.2);
                z-index:300;

                &:after{
                 position:absolute;
                 transform: scale(.7);
                 left : 1.5px;
                 color :#fff;
                }

                //满载
                &.busFullLoad{
                  background-color : $base-purple-color;

                  &:after{
                    content : '满';
                  }
                }

                &.busAlert{
                  background-color : $base-red-color;

                  &:after{
                    content : '警';
                  }

                }

                &.busSpeeding{
                  background-color : $base-yellow-color;

                  &:after{
                    content : '超';
                  }

                }

              }

              @keyframes busScale {
                0% { transform: scale(1.2) }
                50% { transform: scale(1.8) }
                100% { transform : scale(1.2) }
              }

            }
          }

          &.ctc-linear-line{

            li{
              position:absolute;
              width:10px;height:10px;
              border-radius:10px;
              top:-6px;
              background-color:$base-green-color;
              z-index:10;
              box-sizing: border-box;

              &:first-child, &:last-child{
                width:15px;height:15px;
                border-radius:15px;
                border: 2px solid $base-green-color;
                background-color:#fff;
                top:-9px;

                &:after{
                  position:relative;
                  transform: scale(.7);
                  display: inline-block;
                  top:-3px;left:-1px;
                  color: darken( $base-green-color , 10% );
                }
              }

              &:first-child{
                &:after{
                  content : '起';
                }
              }
              &:last-child{
                &:after{
                  content : '终';
                }
              }

              span{
                @include use-flex;

                &.ctc-linearMap-station-name{
                  width:5px;height:auto;
                  position:absolute;
                  color: lighten( $base-color, 15% );
                  line-height:115%;
                  -webkit-transform: scale(.9);
                  -moz-transform: scale(.9);
                  -ms-transform: scale(.9);
                  -o-transform: scale(.9);
                  transform: scale(.9);
                  z-index:10;

                  &.up-station-name{
                    bottom:12px;
                  }

                  &.down-station-name{
                    top:12px;
                  }

                }
              }
            }

          }

        }

      }

    }

  }

}
